<template>
  <!--报到-完成报到-患者信息**废弃**-->
  <div class="report-result-info" v-if="finishReport&&(finishReport.length)" :key="widgetKey">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item,index) in finishReport" :key="`${item.signId}_${index}`"
             v-swiper='{
                  current:index,
                  length:finishReport.length
             }'
        >
          <div class="swiper-slide-inside">
            <div class="top">
              <div class="top-item patient-orderNo">
                <div class="title">排序号</div>
                <div class="content">{{ (item.orderNo) || '\u00a0' }}</div>
              </div>
              <div class="top-item patient-countNum">
                <div class="title">等待人数</div>
                <div class="content">{{ (item.countNum) || '\u00a0' }}</div>
              </div>
              <div class="top-item patient-registerObjName" v-if="optionsInfo['registerObjState']">
                <div class="title">号别</div>
                <div class="content">{{ (item.registerObjName) || '\u00a0' }}</div>
              </div>
              <div class="top-item patient-registerObjName">
                <div class="title">诊室</div>
                <div class="content">{{ item[optionsInfo['roomNameKey']] || (item.treatmentRoomName) || '\u00a0' }}
                </div>
              </div>
            </div>
            <div class="bottom">
              <div class="dept-area item">
                <div class="title">科室</div>
                <div class="content">{{ (item.deptName) || '\u00a0' }}</div>
              </div>
              <div class="card-area item">
                <div class="title">卡号</div>
                <div class="content">{{ (item.patientCardNoHide) || (item.patientCardNo) || '\u00a0' }}</div>
              </div>
              <div class="number-area item">
                <div class="title">姓名</div>
                <div class="content">{{ (item.patientName) || '\u00a0' }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
    <el-button class="button-area" type="primary" @click="handleClick" v-if="false">动态添加数据</el-button>
  </div>
</template>

<script>
import {v4 as uuid} from 'uuid'

export default {
  name: "ReportFinish",

  componentName: "ReportFinish",

  props: {
    devType: {
      type: Boolean,
      default: false,
    },
    field: {
      type: Object,
      default: Object(),
    }
  },

  data() {
    return {
      status: true,
      widgetKey: uuid(),
      optionsInfo: Object(),
    }
  },

  computed: {
    // 完成报到列表
    finishReport() {
      let devType = (this.devType);
      let reportPatientInfo = this.$store.getters['getReportPatientInfo'];
      if (devType) {
        let finishReportList = (reportPatientInfo.apiData.signList)
        if (finishReportList && !!(finishReportList.length)) {
          return finishReportList;
        } else {
          return []
        }
      } else {
        let finishReportList = (reportPatientInfo.mockData.signList)
        if (finishReportList && !!(finishReportList.length)) {
          return finishReportList;
        } else {
          return []
        }
      }
    },
  },

  mounted() {
  },

  methods: {
    handleClick(val) {
      let list = (this.finishReport);
    }
  },

  watch: {
    field: {
      handler: function (val) {
        this.widgetKey = uuid();
        let key = (val.options.config)
        this.optionsInfo = val.options[key];
      },
      deep: true,
      immediate: true
    }
  },

  destroyed() {
  },

};
</script>

<style lang="scss" scoped>
.report-result-info {
  background: white;
  overflow: hidden;
  width: calc(100% - 60px);
  border-radius: 30px;
  box-sizing: border-box;
  margin: 10px 30px 10px 30px;
  position: relative;

  .swiper-container {
    height: 100%;
    display: flex;
    align-self: center;
    align-items: center;
    text-align: center;
    overflow: visible;
    justify-content: center;
    margin-bottom: 60px;

    :deep(.swiper-slide-inside) {
      box-sizing: border-box !important;
      padding: 0 60px;

      .top {
        display: flex;
        flex-direction: column;
        font-weight: 500;
        color: rgba(0, 89, 179, 1);
        font-size: 80px;
        line-height: 118px;
        padding: 28px 0 24px 0;
        justify-content: space-between;
        border-bottom: 4px #DDDDDD solid;

        .top-item {
          font-weight: 600;
          display: flex;
          flex-wrap: nowrap;
          justify-content: space-between;

          .title {
            min-width: 260px;
            flex-basis: 260px;
            width: 260px;
            text-align: left;
            @include singleEllipsis(260px);

          }

          .content {
            text-align: right;
            @include singleEllipsis(calc(100% - 260px))
          }
        }

        .patient-orderNo {
          line-height: 116px;
          font-size: 80px;
        }

        .patient-countNum {
          font-size: 54px;
          line-height: 82px;
        }

        .patient-registerObjName {
          font-size: 54px;
          line-height: 82px;
        }
      }

      .bottom {
        margin-top: 18px;

        .item {
          display: flex;
          font-size: 54px;
          line-height: 86px;
          justify-content: space-between;

          .title {
            flex-shrink: 0;
            color: rgba(102, 102, 102, 1);
          }

          .content {
            color: rgba(51, 51, 51, 1);
            @include fontWeight();
          }
        }
      }
    }

    :deep(.swiper-pagination) {
      width: 100%;
      bottom: -40px;
      z-index: 9999;
      font-size: 48px;

      .swiper-pagination-bullet {
        width: 26px;
        height: 26px;
        margin: 0 12px;
      }
    }
  }

  .swiper-container-empty {
    height: 100%;
    display: flex;
    align-self: center;
    align-items: center;
    text-align: center;
    justify-content: center;
  }

  .button-area {
    position: absolute;
    top: 0;
    z-index: 99999;
  }
}
</style>